<template>
  <div class="announce-box flex js-ct">
    <div class="announce person-bg radius-8">
      <div class="a-header flex js-sp mb-30">
        <SearchBox @search="search" />
        <div class="btn person-btn share-color radius" @click="gosearch">
          {{ $t("exchange.search") }}
        </div>
      </div>
      <div class="a-title text-left flex align-center text-medium mb-30">
        <img src="@/assets/theme1/news.png" alt />
        <span class="text-18 textperson-t2">{{
          $t("global.announcement")
        }}</span>
      </div>
      <ul class="article">
        <div
          class="mb-20"
          v-for="item in state.noticeList"
          @click="checkDetail(item.id)"
          :key="item.notice_title"
        >
          <li class="flex js-st align-center mb-6 point">
            <p class="round"></p>
            <span
              class="textperson-t2 text-14 text-bold text-left break-all ellipsis"
            >
              {{ item.title }}
            </span>
          </li>
          <p class="date textperson-t3 text-10 text-left">
            {{ item.title }}
          </p>
        </div>
      </ul>
      <Norecord v-if="state.noticeList.length === 0" />
      <!-- 分页 -->
      <div class="pagina">
        <Pagination
          :total="state.total"
          :size="state.listparam.limit"
          :current="state.curentPage"
          @currentchange="currentchange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import SearchBox from "@/components/content/content/search.vue";
import { contentNotice } from "@/api/article";
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import Pagination from "@/components/pagination/index.vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { useStore } from "vuex";

export default {
  components: { SearchBox, Pagination, Norecord },
  setup() {
    const $store = useStore();
    const state = reactive({
      noticeList: [],
      total: 0,
      searchVal: "",
      listparam: {
        application_type: "PC",
        limit: 10,
        page: 0,
      },
      loading: false,
      curentPage: 1,
    });
    /**
     * methods
     */
    const $router = useRouter();
    // 获取公告列表
    const getNocice = () => {
      contentNotice(state.listparam).then((res) => {
        state.noticeList = res.data.list[0].news;
        state.total = res.data.total;
      });
    };
    const checkDetail = (id) => {
      $router.push({ path: "/detail", query: { id: id, type: 1 } });
    };
    const gosearch = () => {
      if (!state.searchVal) {
        return;
      }
      $router.push("/announceresult?val=" + state.searchVal);
    };
    const search = (val) => {
      state.searchVal = val;
    };
    // 分页
    const currentchange = (val) => {
      state.listparam.page = val;
      getNocice();
    };
    onMounted(() => {
      getNocice();
      $store.commit("user/SET_CHANGELOCAL", 0);
    });
    return {
      state,
      getNocice,
      checkDetail,
      search,
      gosearch,
      currentchange,
    };
  },
};
</script>

<style scoped lang="less">
.announce-box {
  width: 100%;
  padding: 30px 0 60px 0;
}
.announce {
  width: 684px;
  min-height: 800px;
  padding: 20px 30px 60px;
  position: relative;
}
.a-header {
  width: 100%;
}
.btn {
  width: 118px;
  height: 42px;
  line-height: 42px;
  margin-inline-start: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-6 {
  margin-bottom: 6px;
}
.a-title {
  width: 100%;
  font-family: PingFang SC;
  img {
    width: 40px;
    height: 40px;
    margin-inline-end: 10px;
  }
}
.article {
  width: 100%;
  padding-inline-start: 27px;
}
.round {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #424344;
  margin-inline-end: 15px;
}
.date {
  margin-inline-start: 23px;
}
.jump {
  width: 44px;
  height: 20px;
  line-height: 20px;
  margin-inline-start: 10px;
}
.page {
  width: 20px;
  height: 20px;
}
.pagina {
  position: absolute;
  right: 60px;
  bottom: 30px;
}
.break-all {
  word-break: break-all;
}
.ellipsis {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
